<template>
	<view class="my_page padding20" :style="{'height':`calc(100vh - ${barHeight}px)`,'background-image': `url(${Http_url}/static/images/index_bg.png)`}">
		<view class="content bgWhite shadow">
			<view class="barbox shadow radius14 padding20 acea-row row-between-wrapper ">
				<view class="back blod600" @click="back">
					<text class="iconfont icon-zuo size12" style="padding-right: 10rpx;"></text>
					<text class="txt font_medium">返回</text>
				</view>
				<view class="title size18 font_bold blod600">参与记录</view>
				<view class="refresh yellow" @click="downCallback">
					<text class="iconfont icon-shuaxin size18"></text>
					<text style="margin-left: 10rpx;">刷新</text>
				</view>
			</view>
			<view class="midbox paddingl20">	
				<view class="tabbox acea-row row-between-wrapper">
					<view class="tab-item paddingt20 radius8" :class="tabIndex===1 ? 'checked':''" @click="celectTab(1)">已观看（{{viewNum}}）</view>
					<view class="tab-item paddingt20 radius8" :class="tabIndex===2 ? 'checked':''" @click="celectTab(2)">未观看（{{noViewNum}}）</view>
				</view>
				<view class="listbox">
                    <mescroll-body
                            class="mescroll-body"
                            @init="mescrollInit" 
                            @down="downCallback" 
                            @up="upCallback" 
                            :down="downOption" 
                            :up="upOption"
                            height="400rpx"
                            top="10rpx"
                        >
                            <view class="list-item margint20 acea-row row-between-wrapper" v-for="(item,index) in list" :key="item.id">
                                <view class="list-mid acea-row row-middle">
                                    <view class="avatar">
                                        <image :src="item.wx_img"></image>
                                    </view>
                                    <view class="info">
                                        <view class="name font_medium blod600">{{item.wx_name}}</view>
                                        <view class="answer size12 yellow" v-if="item.is_dt===1">已答题</view>
                                        <view class="answer size12 hui" v-else>未答题</view>
                                    </view>
                                </view>
                                <view class="btnbox acea-row row-between-wrapper">
                                </view>
                            </view>
                     </mescroll-body> 
				</view>
			</view>
		</view>
	</view>	
</template>

<script>
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { mapGetters } from "vuex";
	import nolist from "@/components/nolist.vue";
	import {getVoidWathLog} from "@/api/video.js";
	import {Resource_url,Http_url} from '@/config/config.js'
	export default {
		computed: mapGetters(['isLogin', 'globalData']),
        mixins: [MescrollMixin],
		components: {
			nolist
		},
		data() {
			return {
				Http_url:Http_url,
				adminUrl:Resource_url,
				vid:0,
				barHeight:0,
				tabIndex:1,
				list:[],
				viewNum:0,
				noViewNum:0,
				limit:20,
				page:1,
                
                
                // 下拉刷新的配置(可选, 绝大部分情况无需配置)
                downOption: { 
                	// auto: false
                },
                // 上拉加载的配置(可选, 绝大部分情况无需配置)
                upOption: {
                	// auto: false,
                	page: {
                		size: 10 // 每页数据的数量,默认10
                	},
                	noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                	empty: {
                		tip: '暂无相关数据'
                	},
                	textNoMore: '没有更多了'
                },
			};
		},
		onLoad(option) {
			if(!option){
				this.$util.Tips({
					title:err
				},{
					tab:3
				})
			}else{
				this.vid = option.id
				this.barHeight=this.globalData.barHeight
				// this.getVoidWathLog()
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1,
				})
			},
			celectTab(i){
				this.tabIndex = i
				this.downCallback()
			},
            
            /*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
            mescrollInit(mescroll) {
            	this.mescroll = mescroll;
            },
            
            // 下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
            downCallback(){
            	this.list = []
            	this.mescroll.resetUpScroll();
            },
            /*上拉加载的回调*/
            upCallback(page) {
            	let pageNum = page.num; // 页码, 默认从1开始
            	let pageSize = page.size; // 页长, 默认每页10条
                let param={
                	list_rows: pageSize,
                	page: pageNum,
                	vid: this.vid,
                	is_gk: this.tabIndex
                }
                this.loading=true
                getVoidWathLog(param).then(res => {
                    
                    this.viewNum = res.co_data[0].zong_guankan
                    this.noViewNum = res.co_data[0].zong_weican_user
                    
                	let list = this.compatibleList(res.data)
                	// let list = res.data
                    
                	this.list = this.list.concat(list)
              
                	// this.mescroll.endSuccess(list.length, list.length >= page.size)
                	this.mescroll.endSuccess(list.length, false)
 
                    this.loading = false
                    
                }).catch(err=>{
                	this.$u.toast(err.message || '')
                	this.mescroll.endErr()
                })
            },
            /**
             * TODO 此处是为了兼容后端返回的res.data 类型错误问题，后端返回的是对象数组，这里转换成数组。
             * 后续后端修改后将此处修改删除
             */
            compatibleList(res){
                let list = []
                if(Array.isArray(res)){
                    list = res
                }else {
                    list = Object.keys(res).map((key, item) => {
                        return res[key]
                    })
                }
                return list
            }
            
		}
	}
</script>

<style lang="scss">
	.my_page{
		width: 100%;
		background-position: top;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.content{
		// height: calc(100% - -10rpx);
		border-top-left-radius: 14px;
		border-top-right-radius: 14px;
        padding-bottom: 100rpx;
		.barbox{
			.title{	
				width: calc(100% - 240rpx);
				text-align: center;
			}
			.refresh{
				border: 2rpx #FEA40B solid;
				border-radius: 40rpx;
				padding: 8rpx 10rpx;
			}
		}
		.midbox{
			.tabbox{
				margin: 40rpx 0;
				.tab-item{
					position: relative;
					width: calc(50% - 20rpx);
					line-height: 50rpx;
					text-align: center;
					border: 2rpx #000 solid;
				}
				.checked{
					background-color: #FEA40B;
					border: 2rpx solid #FEA40B;
					color: #ffffff;
				}
				.tab-item.checked::before{
					position: absolute;
					bottom: -20rpx;
					left: 25%;
					content: '';
					width: 0;
					height: 0;
					border-left: 40px solid transparent;
					border-right: 40px solid transparent;
					border-top: 20px solid #FEA40B;
				}
			}
			.listbox{ 
				.list-item{
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid rgba(0,0,0,0.05);
					.avatar{
						width: 100rpx;
						height: 100rpx;
						border: 4rpx solid #FFFFFF;
						border-radius: 50%;
						overflow: hidden;
					}
					.info{
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>
